<template>
  <PagesContainer :loading="pageLoading">
    <view v-if="newsDetail.id" class="page-container full-screen bg-white">
      <view class="news-title line-clamp-2">
        {{ newsDetail.title }}
      </view>
      <view class="news-info">
        <text class="author">{{ newsDetail.realName || '' }}</text>
        <text class="date">{{ showDate }}</text>
        <text class="view">{{ newsDetail.views }}浏览</text>
      </view>

      <!--  主图  -->
      <view v-if="newsDetail.fileUrl" class="news-image mt-30rpx">
        <u-image
          :src="newsDetail.fileUrl"
          width="100%"
          height="auto"
          mode="widthFix"
        />
      </view>
      <!--  正文  -->
      <view class="news-content">
        <u-parse :content="newsDetail.content" />
      </view>
    </view>
    <u-empty
      v-else
      margin-top="36%"
      icon="https://ui-resourse.oss-cn-shenzhen.aliyuncs.com/picture/2022/03/17/aUXPlIYfLUqWTgQl.png"
      text="文章未找到或已被删除"
    />
  </PagesContainer>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'

import PagesContainer from '@/components/pages-container/pages-container.vue'
import { showToast } from '@/utils'

import { getNewsDetail, postNewsView } from './service'

@Component({ name: 'NewsDetail', components: { PagesContainer } })
export default class NewsDetail extends Vue {
  pageLoading = true

  newsDetail = {} as Recordable

  get showDate() {
    return this.newsDetail.updateTime?.slice(0, 10)
  }

  onLoad() {
    uni.showShareMenu({
      menus: ['shareAppMessage', 'shareTimeline']
    })

    const { id } = this.$mp.query
    if (!id) return showToast('非法访问！')
    getNewsDetail(id)
      .then((res) => {
        this.newsDetail = res
        uni.setNavigationBarTitle({ title: res.title })
      })
      .finally(() => {
        this.pageLoading = false
      })
  }

  onShareAppMessage(options: Page.ShareAppMessageOption) {
    postNewsView({ id: this.newsDetail.id, incType: 3 })
    return {
      title: this.newsDetail.title,
      path: `/pages/news/detail?id=${this.newsDetail.id}`,
      imageUrl: this.newsDetail.fileUrl
    }
  }
}
</script>

<style lang="scss" scoped>
.page-container {
  padding-left: 60rpx;
  padding-right: 60rpx;
}

.news-title {
  font-weight: 500;
  font-size: $font-size-2xl;
  line-height: 50rpx;
  color: $color-first-text;
}

.news-info {
  margin-top: 16rpx;
  font-weight: 400;
  font-size: $font-size-xs;
  line-height: 34rpx;
  color: $color-third-text;

  & > text {
    margin-right: $space-base;
  }
}

.news-content {
  margin-top: $space-base;
  font-weight: 400;
  font-size: $font-size-xl;
  line-height: 64rpx;
  color: $color-first-text;
  text-align: justify;
}
</style>
